import { addRule, removeRule, rule, updateRule } from '@/services/ant-design-pro/api';
import { PlusOutlined } from '@ant-design/icons';
import type { ActionType, ProColumns, ProDescriptionsItemProps } from '@ant-design/pro-components';
import {
  CheckCard,
  FooterToolbar,
  ModalForm,
  PageContainer,
  ProDescriptions, ProForm, ProFormSelect,
  ProFormText,
  ProFormTextArea,
  ProTable,
} from '@ant-design/pro-components';
import { FormattedMessage, useIntl } from '@umijs/max';
import {Avatar, Button, Drawer, Form, Input, message} from 'antd';
import React, { useRef, useState } from 'react';
import type { FormValueType } from './components/UpdateForm';
import UpdateForm from './components/UpdateForm';
import { CloseOutlined, SnippetsOutlined } from '@ant-design/icons';
import type { FormListActionType } from '@ant-design/pro-components';
import { ProFormList } from '@ant-design/pro-components';
/**
 * @en-US Add node
 * @zh-CN 添加节点
 * @param fields
 */
const handleAdd = async (fields: API.RuleListItem) => {
  const hide = message.loading('正在添加');
  try {
    await addRule({ ...fields });
    hide();
    message.success('Added successfully');
    return true;
  } catch (error) {
    hide();
    message.error('Adding failed, please try again!');
    return false;
  }
};

/**
 * @en-US Update node
 * @zh-CN 更新节点
 *
 * @param fields
 */
const handleUpdate = async (fields: FormValueType) => {
  const hide = message.loading('Configuring');
  try {
    await updateRule({
      name: fields.name,
      desc: fields.desc,
      key: fields.key,
    });
    hide();

    message.success('Configuration is successful');
    return true;
  } catch (error) {
    hide();
    message.error('Configuration failed, please try again!');
    return false;
  }
};

/**
 *  Delete node
 * @zh-CN 删除节点
 *
 * @param selectedRows
 */
const handleRemove = async (selectedRows: API.RuleListItem[]) => {
  const hide = message.loading('正在删除');
  if (!selectedRows) return true;
  try {
    await removeRule({
      key: selectedRows.map((row) => row.key),
    });
    hide();
    message.success('Deleted successfully and will refresh soon');
    return true;
  } catch (error) {
    hide();
    message.error('Delete failed, please try again');
    return false;
  }
};

// 喻靖峰喊我随便加几个字
const TableList: React.FC = () => {
  /**
   * @en-US Pop-up window of new window
   * @zh-CN 新建窗口的弹窗
   *  */
  const [createModalOpen, handleModalOpen] = useState<boolean>(false);
  /**
   * @en-US The pop-up window of the distribution update window
   * @zh-CN 分布更新窗口的弹窗
   * */
  const [updateModalOpen, handleUpdateModalOpen] = useState<boolean>(false);

  const [showDetail, setShowDetail] = useState<boolean>(false);

  const actionRef = useRef<ActionType>();
  const [currentRow, setCurrentRow] = useState<API.RuleListItem>();
  const [selectedRowsState, setSelectedRows] = useState<API.RuleListItem[]>([]);

  /**
   * @en-US International configuration
   * @zh-CN 国际化配置
   * */
  const intl = useIntl();

  const columns: ({ dataIndex: string; tip: string; title: JSX.Element; render: (dom, entity) => JSX.Element } | { dataIndex: string; valueType: string; title: JSX.Element } | { sorter: boolean; dataIndex: string; hideInForm: boolean; title: JSX.Element; renderText: (val: string) => string } | { dataIndex: string; valueEnum: { "0": { text: JSX.Element; status: string }; "1": { text: JSX.Element; status: string }; "2": { text: JSX.Element; status: string }; "3": { text: JSX.Element; status: string } }; hideInForm: boolean; title: JSX.Element } | {
    sorter: boolean; dataIndex: string; valueType: string; renderFormItem: (item, {
      defaultRender,
      ...rest
    }: { defaultRender: any; [p: string]: any }, form) => (boolean | JSX.Element); title: JSX.Element
  } | { dataIndex: string; valueType: string; title: JSX.Element; render: (_, record) => JSX.Element[] })[] = [
    {
      title: (
        <FormattedMessage
          id="pages.searchTable.updateForm.ruleName.nameLabel"
          defaultMessage="商品名称"
        />
      ),
      dataIndex: 'name',
      tip: '商品名称不能重复',
      render: (dom, entity) => {
        return (
          <a
            onClick={() => {
              setCurrentRow(entity);
              setShowDetail(true);
            }}
          >
            {dom}
          </a>
        );
      },
    },
    {
      title: <FormattedMessage id="pages.searchTable.titleDesc" defaultMessage="Description" />,
      dataIndex: 'desc',
      valueType: 'textarea',
    },
    {
      title: (
        <FormattedMessage
          id="pages.searchTable.titleCallNo"
          defaultMessage="Number of service calls"
        />
      ),
      dataIndex: 'callNo',
      sorter: true,
      hideInForm: true,
      renderText: (val: string) =>
        `${val}${intl.formatMessage({
          id: 'pages.searchTable.tenThousand',
          defaultMessage: ' 万 ',
        })}`,
    },
    {
      title: <FormattedMessage id="pages.searchTable.titleStatus" defaultMessage="Status" />,
      dataIndex: 'status',
      hideInForm: true,
      valueEnum: {
        0: {
          text: (
            <FormattedMessage
              id="pages.searchTable.nameStatus.default"
              defaultMessage="Shut down"
            />
          ),
          status: 'Default',
        },
        1: {
          text: (
            <FormattedMessage id="pages.searchTable.nameStatus.running" defaultMessage="Running" />
          ),
          status: 'Processing',
        },
        2: {
          text: (
            <FormattedMessage id="pages.searchTable.nameStatus.online" defaultMessage="Online" />
          ),
          status: 'Success',
        },
        3: {
          text: (
            <FormattedMessage
              id="pages.searchTable.nameStatus.abnormal"
              defaultMessage="Abnormal"
            />
          ),
          status: 'Error',
        },
      },
    },
    {
      title: (
        <FormattedMessage
          id="pages.searchTable.titleUpdatedAt"
          defaultMessage="Last scheduled time"
        />
      ),
      sorter: true,
      dataIndex: 'updatedAt',
      valueType: 'dateTime',
      renderFormItem: (item, { defaultRender, ...rest }, form) => {
        const status = form.getFieldValue('status');
        if (`${status}` === '0') {
          return false;
        }
        if (`${status}` === '3') {
          return (
            <Input
              {...rest}
              placeholder={intl.formatMessage({
                id: 'pages.searchTable.exception',
                defaultMessage: 'Please enter the reason for the exception!',
              })}
            />
          );
        }
        return defaultRender(item);
      },
    },
    {
      title: <FormattedMessage id="pages.searchTable.titleOption" defaultMessage="Operating" />,
      dataIndex: 'option',
      valueType: 'option',
      render: (_, record) => [
        <a
          key="config"
          onClick={() => {
            handleUpdateModalOpen(true);
            setCurrentRow(record);
          }}
        >
          <FormattedMessage
            id="pages.searchTable.subscribeItem"
            defaultMessage="购买服务" />
        </a>,
        // <a key="subscribeAlert" href="https://procomponents.ant.design/">
        //   <FormattedMessage
        //     id="pages.searchTable.subscribeAlert"
        //     defaultMessage="使用服务"
        //   />
        // </a>,
      ],
    },
  ];
  const actionRef2 = useRef<
    FormListActionType<{
      name: string;
    }>
    >();


  return (
    <PageContainer>
      <ProTable<API.RuleListItem, API.PageParams>
        headerTitle={intl.formatMessage({
          id: 'pages.searchTable.title',
          defaultMessage: 'Enquiry form',
        })}
        actionRef={actionRef}
        rowKey="key"
        search={{
          labelWidth: 120,
        }}

        //新建 按钮
        toolBarRender={() => [
          <Button
            type="primary"
            key="primary"
            onClick={() => {
              handleModalOpen(true);
            }}
          >
            <PlusOutlined /> <FormattedMessage id="pages.searchTable.realiseNew" defaultMessage="发布新商品" />
          </Button>,
        ]}

        request={rule}
        columns={columns}

        // 商品名称左边的那个勾选框
        rowSelection={{
          onChange: (_, selectedRows) => {
            setSelectedRows(selectedRows);
          },
        }}
      />

      {/*//勾选栏对应的底端菜单*/}
      {selectedRowsState?.length > 0 && (
        <FooterToolbar
          extra={
            <div>
              <FormattedMessage id="pages.searchTable.chosen" defaultMessage="Chosen" />{' '}
              <a style={{ fontWeight: 600 }}>{selectedRowsState.length}</a>{' '}
              <FormattedMessage id="pages.searchTable.item" defaultMessage="项" />
              &nbsp;&nbsp;
              <span>
                <FormattedMessage
                  id="pages.searchTable.totalServiceCalls"
                  defaultMessage="Total number of service calls"
                />{' '}
                {selectedRowsState.reduce((pre, item) => pre + item.callNo!, 0)}{' '}
                <FormattedMessage id="pages.searchTable.tenThousand" defaultMessage="万" />
              </span>
            </div>
          }
        >
          <Button
            onClick={async () => {
              await handleRemove(selectedRowsState);
              setSelectedRows([]);
              actionRef.current?.reloadAndRest?.();
            }}
          >
            <FormattedMessage
              id="pages.searchTable.batchDeletion"
              defaultMessage="Batch deletion"
            />
          </Button>
          <Button type="primary">
            <FormattedMessage
              id="pages.searchTable.batchApproval"
              defaultMessage="Batch approval"
            />
          </Button>
        </FooterToolbar>
      )}

      {/*新建按钮对应的菜单界面*/}
      <ModalForm
        title={intl.formatMessage({
          id: 'pages.searchTable.createForm.newRule',
          defaultMessage: 'New rule',
        })}
        width="1040px"
        open={createModalOpen}
        onOpenChange={handleModalOpen}
        onFinish={async (value) => {
          const success = await handleAdd(value as API.RuleListItem);
          if (success) {
            handleModalOpen(false);
            if (actionRef.current) {
              actionRef.current.reload();
            }
          }
        }}
      >
        <ProForm.Group>
          <ProFormText
            name="name"
            width="lg"
            label="出售商品名"
            tooltip="最长为 24 位"
            placeholder="请输入名称"
            rules={[
              {
                required: true,
                message: (
                  <FormattedMessage
                    id="pages.searchTable.updateForm.ruleName.nameRules"
                    defaultMessage="请输入商品名！"
                  />
                ),
              },
            ]}
          />
          <ProFormTextArea
            width="lg"
            name="desc"
            label="商品描述"
            tooltip="最长为 24 位"
          />
        </ProForm.Group>
        <ProForm.Group>
          <ProFormList
            copyIconProps={{
              Icon: SnippetsOutlined,
            }}
            deleteIconProps={{
              Icon: CloseOutlined,
            }}
            min={1}
            max={3}
            actionRef={actionRef2}
            actionGuard={{
              beforeAddRow: async (defaultValue, insertIndex, count) => {
                return new Promise((resolve) => {
                  console.log(defaultValue?.name, insertIndex, count);
                  setTimeout(() => resolve(true), 500);
                });
              },
              beforeRemoveRow: async (index, count) => {
                const row = actionRef2.current?.get(index as number);
                console.log('--->', index, count, row);
                return new Promise((resolve) => {
                  if (index === 0) {
                    resolve(false);
                    return;
                  }
                  setTimeout(() => resolve(true), 500);
                });
              },
            }}
            name="users"
            label="使用时间与价格"
            initialValue={[
              {
              },
            ]}
          >
            <ProForm.Group>
              <ProFormSelect
                options={[
                  {
                    value: 'year',
                    label: '年',
                  },
                  {
                    value: 'season',
                    label: '季',
                  },
                  {
                    value: 'month',
                    label: '月',
                  },
                ]} width="xs"
                name="count"
                label="选择时长"
                rules={[
                  {
                    required: true,
                    message: (
                      <FormattedMessage
                        id="pages.item.count.required"
                        defaultMessage="请选择使用优惠！"
                      />
                    ),
                  },
                ]}
              />
              <ProFormText key="useMode" name="name" label="价格" />
            </ProForm.Group>
          </ProFormList>
        </ProForm.Group>
        <Form.Item name="specifications" label="选择规格" >
          <CheckCard.Group style={{ width: '100%' }}>
            <CheckCard
              defaultChecked
              title="精简版"
              avatar={<Avatar src="https://gw.alipayobjects.com/zos/bmw-prod/2dd637c7-5f50-4d89-a819-33b3d6da73b6.svg" size="large" />}
              description="基础功能，适合个人使用,$99.99"
              value="lite"
            />
            <CheckCard
              title="加强版"
              avatar={<Avatar src="https://gw.alipayobjects.com/zos/bmw-prod/6935b98e-96f6-464f-9d4f-215b917c6548.svg" size="large" />}
              description="加强功能，适合企业使用，$199.99"
              value="pro"
            />

          </CheckCard.Group>
        </Form.Item>
        <Form.Item name="features" label="选择功能点">
          <CheckCard.Group style={{ width: '100%' }} multiple={true}>
            <CheckCard
              title="高级搜索"
              avatar={<Avatar src="https://gw.alipayobjects.com/zos/bmw-prod/2dd637c7-5f50-4d89-a819-33b3d6da73b6.svg" size="large" />}
              description="提供高级搜索功能，允许用户根据多个条件进行筛选，￥9.9每次"
              value="search"

            />
            <CheckCard
              title="数据导出"
              avatar={<Avatar src="https://gw.alipayobjects.com/zos/bmw-prod/6935b98e-96f6-464f-9d4f-215b917c6548.svg" size="large" />}
              description="允许用户将数据导出为CSV或Excel格式，￥2.99"
              value="output"
            />
            <CheckCard
              title="实时通知"
              avatar={<Avatar src="https://gw.alipayobjects.com/zos/bmw-prod/d12c3392-61fa-489e-a82c-71de0f888a8e.svg" size="large" />}
              description="为用户提供实时更新通知功能，￥3.99"
              value="SOFABoot"
            />
          </CheckCard.Group>
        </Form.Item>

      </ModalForm>

      <UpdateForm
        onSubmit={async (value) => {
          const success = await handleUpdate(value);
          if (success) {
            handleUpdateModalOpen(false);
            setCurrentRow(undefined);
            if (actionRef.current) {
              actionRef.current.reload();
            }
          }
        }}
        onCancel={() => {
          handleUpdateModalOpen(false);
          if (!showDetail) {
            setCurrentRow(undefined);
          }
        }}
        updateModalOpen={updateModalOpen}
        values={currentRow || {}}
      />

    </PageContainer>
  );
};

export default TableList;
